<template>
  <div class="home-page">
    <SeoHead
      title="首页 | 个人博客与简历"
      description="欢迎访问我的个人网站，这里展示我的作品集、技术博客和个人简历。"
    />
    <!-- Hero Section -->
    <section class="hero-section py-16 md:py-24">
      <div class="layout-container">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          <div class="hero-content">
            <h1
              class="text-4xl md:text-5xl font-bold mb-4 text-text-primary hero-title"
            >
              <span class="text-primary">个人简历</span> &
              <span class="text-primary">博客平台</span>
            </h1>
            <p class="text-lg text-text-secondary mb-8 hero-description">
              欢迎访问我的个人网站，这里展示我的作品集、技术博客和个人简历。
            </p>
            <div class="flex flex-wrap gap-4 hero-buttons">
              <n-button type="primary" size="large" class="px-8">
                查看简历
              </n-button>
              <n-button ghost class="px-8" size="large"> 浏览作品 </n-button>
            </div>
          </div>
          <div class="hero-image-container">
            <img
              src="/images/svg/hero.svg"
              alt="Hero Image"
              class="hero-image w-full h-auto max-w-md mx-auto"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- Skills Section -->
    <section class="skills-section py-16 bg-bg-primary">
      <div class="layout-container">
        <h2
          class="text-3xl font-bold mb-12 text-center text-text-primary animate-item"
        >
          我的技能
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          <div
            v-for="(skill, index) in skills"
            :key="index"
            class="skill-card bg-bg-secondary p-6 rounded-lg shadow-sm text-center animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <n-icon size="40" class="text-primary mb-4">
              <component :is="skill.icon" />
            </n-icon>
            <h3 class="text-xl font-medium mb-2 text-text-primary">
              {{ skill.name }}
            </h3>
            <p class="text-text-secondary">{{ skill.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Categories Section -->
    <section class="categories-section py-16 bg-bg-primary">
      <div class="layout-container">
        <h2
          class="text-3xl font-bold mb-12 text-center text-text-primary animate-item"
        >
          博客分类
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="(category, index) in categories"
            :key="index"
            class="category-card bg-bg-secondary p-6 rounded-lg shadow-sm animate-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="flex items-start gap-4">
              <n-icon size="32" class="text-primary mt-1">
                <component :is="category.icon" />
              </n-icon>
              <div>
                <h3 class="text-xl font-medium mb-2 text-text-primary">
                  {{ category.name }}
                </h3>
                <p class="text-text-secondary">{{ category.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最后一个部分 -->
    <section class="cta-section py-16 bg-bg-primary last-section">
      <!-- 内容 -->
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  CodeOutline,
  DesktopOutline,
  BrushOutline,
  ServerOutline,
  ChatbubbleOutline,
  DocumentTextOutline,
  ColorPaletteOutline,
  HardwareChipOutline,
  RocketOutline,
} from "@vicons/ionicons5";

// 示例技能数据
const skills = [
  { name: "前端开发", icon: CodeOutline, description: "Vue, React, Angular" },
  { name: "UI/UX设计", icon: BrushOutline, description: "Figma, Adobe XD" },
  {
    name: "后端开发",
    icon: ServerOutline,
    description: "Node.js, Python, Java",
  },
  {
    name: "移动开发",
    icon: HardwareChipOutline,
    description: "Flutter, React Native",
  },
  { name: "桌面应用", icon: DesktopOutline, description: "Electron, Tauri" },
  { name: "DevOps", icon: RocketOutline, description: "Docker, CI/CD" },
  { name: "数据库", icon: ServerOutline, description: "MySQL, MongoDB" },
  { name: "云服务", icon: ServerOutline, description: "AWS, GCP, Azure" },
];

// 示例博客分类
const categories = [
  {
    name: "技术教程",
    icon: CodeOutline,
    description: "深入浅出的编程技术教程和指南",
  },
  {
    name: "设计思考",
    icon: ColorPaletteOutline,
    description: "UI/UX设计思路和案例分析",
  },
  {
    name: "项目实战",
    icon: RocketOutline,
    description: "真实项目开发经验和技巧分享",
  },
  {
    name: "行业洞见",
    icon: DocumentTextOutline,
    description: "技术行业趋势和发展分析",
  },
  {
    name: "个人成长",
    icon: ChatbubbleOutline,
    description: "职业发展和自我提升的心得体会",
  },
];

// 使用 Intersection Observer 监测元素是否进入视口
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("animate-visible");
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  );

  // 观察所有需要动画的元素
  document.querySelectorAll(".animate-item").forEach((item) => {
    observer.observe(item);
  });
});
</script>

<style scoped>
/* Hero 区域样式 */
.hero-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-primary);
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: var(--bg-secondary);
  z-index: 0;
  border-radius: 0 0 0 50%;
  opacity: 0.5;
}

/* 确保内容在伪元素之上 */
.hero-content,
.hero-image-container {
  position: relative;
  z-index: 1;
}

.hero-title {
  animation: fadeInUp 0.8s ease-out;
}

.hero-description {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-buttons {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-image {
  animation: fadeInRight 1s ease-out 0.2s both;
  transform-origin: center;
}

/* 滚动触发动画 */
.animate-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

.skill-card,
.category-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover,
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 为 Hero 图片添加悬浮动画 */
.hero-image {
  animation: floatAnimation 4s ease-in-out infinite;
}

/* 优化Hero区域在移动端的显示 */
@media (max-width: 768px) {
  .hero-section {
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  /* 调整Hero装饰效果 */
  .hero-section::before {
    width: 70%;
    opacity: 0.3;
  }

  /* 调整图片尺寸 */
  .hero-image {
    max-width: 80%;
    margin-top: 2rem;
  }

  /* 调整技能卡片在移动端的间距和大小 */
  .skills-section .grid {
    gap: 1rem;
  }

  .skill-card {
    padding: 1rem;
  }

  .skill-card h3 {
    font-size: 1.1rem;
  }
}

/* 小屏幕上的额外调整 */
@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem !important;
  }

  .hero-description {
    font-size: 1rem !important;
  }
}
</style>
